import { createRouter, createWebHashHistory } from 'vue-router'
const HomeView=()=>import("@/views/HomeView.vue")
const UserStart=()=>import("@/views/user/UserStart.vue")
const UserDetail=()=>import("@/views/user/UserDetail.vue")
const UserEdit=()=>import("@/views/user/UserEdit.vue")
const Header=()=>import("@/components/Header.vue")
const Footer=()=>import("@/components/Footer.vue")
import NProgress from "nprogress"
const routes = [
  {
    path: '/',
    name: 'home',
    components:{
      default:HomeView,
      "router-view-header":Header,
      "router-view-footer":Footer,
    }
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: function () {
      return import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    },
    children:[{
      path:"",
      name:"userStart",
      component:UserStart,
    },{
      path:":id",
      component:UserDetail,
    },{
      name:"userEdit",
      path:":id/edit",
      component:UserEdit,
      props:(route)=>({
        id:route.params.id,
      })
    }]
  },{
    path:"/redirect-to-users",
    redirect:"/about",
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  linkActiveClass:"active",
  scrollBehavior:(to,from,savedPosition)=>{
    if(savedPosition){
      return savedPosition
    }
    return {
      left:0,
      top:0,
    }
  }
})
router.beforeEach((to,from,next)=>{
  NProgress.start()
  next()
})
router.afterEach(()=>{
  NProgress.done()
})
export default router
